import React, { useRef } from 'react';
import { Statistic } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import type { ProColumns,ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';

import { tongjiProvider } from './service'

const TableList: React.FC = () => {

  const actionRef = useRef<ActionType>();

  const providerList: ProColumns[] = [
    {
      title: '供应商名称',
      dataIndex: 'provider_name',
    },
    {
      title: '利润',
      dataIndex: 'money',
      hideInSearch: true,
      align: 'right',
      render: (dom, rowData) => {
        return (
          <Statistic
            precision={3}
            valueStyle={{ color: rowData.out_price_all > rowData.in_price_all ? '#52c41a' : '#f00', fontSize: '16px', fontWeight: 500 }}
            value={rowData.money}
          />
        )
      },
      sorter: (a, b) => a.money - b.money,
    },
    {
      title: '入库数量',
      align: 'right',
      dataIndex: 'in_stock',
      hideInSearch: true,
      sorter: (a, b) => a.in_stock - b.in_stock,
    },
    {
      title: '入库平均单价',
      align: 'right',
      // valueType: 'money',
      dataIndex: 'in_price',
      hideInSearch: true,
      render: (dom, rowData) => {
        return (
          <Statistic
            precision={3}
            valueStyle={{ fontSize: '14px' }}
            value={rowData.in_price}
          />
        )
      },
      sorter: (a, b) => a.in_price - b.in_price,
    },
    {
      title: '入库总价值',
      align: 'right',
      // valueType: 'money',
      dataIndex: 'in_price_all',
      hideInSearch: true,
      render: (dom, rowData) => {
        return (
          <Statistic
            precision={3}
            valueStyle={{ fontSize: '14px' }}
            value={rowData.in_price_all}
          />
        )
      },
      sorter: (a, b) => a.in_price_all - b.in_price_all,
    },
    {
      title: '出库数量',
      align: 'right',
      dataIndex: 'out_stock',
      hideInSearch: true,
      sorter: (a, b) => a.out_stock - b.out_stock,
    },
    {
      title: '日期',
      dataIndex: 'searchDate',
      hideInTable: true,
      valueType: 'dateRange',
      search: {
        transform: (value: any) => ({ bdate: value[0], edate: value[1] }),
      },
    },
    {
      title: '出库平均单价',
      align: 'right',
      // valueType: 'money',
      dataIndex: 'out_price',
      hideInSearch: true,
      render: (dom, rowData) => {
        return (
          <Statistic
            precision={3}
            valueStyle={{ fontSize: '14px' }}
            value={rowData.out_price}
          />
        )
      },
      sorter: (a, b) => a.out_price - b.out_price,
    },
    {
      title: '出库总价值',
      align: 'right',
      // valueType: 'money',
      dataIndex: 'out_price_all',
      hideInSearch: true,
      render: (dom, rowData) => {
        return (
          <Statistic
            precision={3}
            valueStyle={{ fontSize: '14px' }}
            value={rowData.out_price_all}
          />
        )
      },
      sorter: (a, b) => a.out_price_all - b.out_price_all,
    },
    {
      title: '报损总值',
      align: 'right',
      // valueType: 'money',
      dataIndex: 'loss_price_all',
      hideInSearch: true,
      render: (dom, rowData) => {
        return (
          <Statistic
            precision={3}
            valueStyle={{ fontSize: '14px' }}
            value={rowData.loss_price_all}
          />
        )
      },
      sorter: (a, b) => a.loss_price_all - b.loss_price_all,
    },
    {
      title: '报损总量',
      align: 'right',
      dataIndex: 'loss_stock',
      hideInSearch: true,
      sorter: (a, b) => a.loss_stock - b.loss_stock,
    },
  ]

  return (
    <PageContainer>
      <ProTable
        headerTitle="供应商统计列表"
        loading={false}
        actionRef={actionRef}
        rowKey="id"
        bordered={true}
        columns={providerList}
        pagination={{
          pageSize: 10,
          current: 1
        }}
        search={false}
        request={async (params) => {
          const dataParams = {
            page: params.current,
            limit: params.pageSize,
            provider_id: params.provider_id,
            oil_depot_id: params.oil_depot_id,
            oil_name: params.oil_name,
            oil_type: params.oil_type,
            bdate: params.bdate,
            edate: params.edate,
          }
          const res = await tongjiProvider({ ...dataParams });
          return {
            data: res.data.list,
            success: res.code === 200,
            total: res.data.total,
          };
        }}
      />

    </PageContainer>
  );
};

export default TableList;
